<template>
  <div class="container">
    <el-tabs class="demo-tabs" v-model="activeName" @tab-click="handleClick" stretch="true">
      <el-tab-pane label="反馈" name="反馈">
        <div style="padding:10px">

          <el-card :body-style="{ padding: '0px' }">
            <template #header>
              请选择反馈类型
            </template>
            <div style="padding:10px">
              <el-radio v-model="currentReport.type" label="内容意见">内容意见</el-radio>
              <el-radio v-model="currentReport.type" label="功能意见">功能意见</el-radio>
              <el-radio v-model="currentReport.type" label="网络问题">网络问题</el-radio>
              <el-radio v-model="currentReport.type" label="程序异常">程序异常</el-radio>
              <el-radio v-model="currentReport.type" label="作品问题">作品问题</el-radio>
              <el-radio v-model="currentReport.type" label="吐槽">吐槽一下</el-radio>
            </div>
          </el-card>
        </div>
        <div class="row-line"></div>
        <QuillEditor theme="snow" v-model:content="currentReport.content" :toolbar="toolbar"
          contentType="html" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)" @update:content="onTextChange($event)" />
        <div style="float:right;margin-right:10px;margin-top:10px">
          <el-tag v-show="!isToLong" type="success">{{sizeFormat(useRom)}}/10Mb</el-tag>
          <el-tag v-show="isToLong" type="danger">{{sizeFormat(useRom)}}/10Mb</el-tag>
          <el-button type="primary" @click="submit()" :loading="submitLoading">发送反馈</el-button>

        </div>
        <div class="row-line"></div>

        <!-- 反馈列表 -->
        <div class="report-list">
          <div>历史反馈列表</div>
          <div v-for="(report,index) in reportList" :key="report.id">
            <div class="row-line"></div>
            <el-card :body-style="{ padding: '0px' }">
              <template #header>
                <div @click="previewMore1(report)">
                  {{index+1}}. {{report.type}}<el-tag v-show="report.state==0"
                    type="danger">待解决</el-tag>
                  <el-tag v-show="report.state==1" type="success">已解决</el-tag>
                  <el-tag v-show="report.state==2" type="warning">已回复</el-tag>
                  <el-button v-show="report.state==2"
                    @click.stop="appraise(report.id,report)">待评价</el-button>
                </div>

              </template>
              <div v-show="report.contentBack!=null" @click="previewMore(report)"
                style="padding:10px;font-size:14px;max-height:400px">
                回复：
                <QuillEditor theme="snow" v-model:content="report.contentBack" :readOnly="true"
                  :toolbar="[]" contentType="html" />
              </div>
            </el-card>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="常见问题" name="常见问题">
        <ul>
          <li>如何上传图片？</li>
          <li>图片显示加载失败？</li>
          <li>忘记密码绑定的手机号？</li>
          <li>网络加载非常慢？</li>
          <li>审核不通过怎么办？</li>
        </ul>
      </el-tab-pane>
    </el-tabs>
    <!-- 回复查看 -->
    <el-dialog v-model="lookMore" title="回复详情" :center="true">
      <QuillEditor theme="snow" v-model:content="lookMoreContent.contentBack" :readOnly="true"
        :toolbar="[]" contentType="html" />
    </el-dialog>
    <!-- 问题查看 -->
    <el-dialog v-model="lookMore1" title="问题详情" :center="true">
      <QuillEditor theme="snow" v-model:content="lookMoreContent.content" :readOnly="true"
        :toolbar="[]" contentType="html" />
    </el-dialog>
    <!-- 评价 -->
    <el-dialog v-model="appraiseDialog" title="评价" :center="true">
      <el-rate v-model="score.score" show-text :texts="['极差', '失望', '一般', '满意', '太棒了']">
      </el-rate>
      <el-input type="textarea" :rows="3" placeholder="评价一下吧" v-model="score.scoreContent"
        maxlength="200" show-word-limit>
      </el-input>
      <template #footer>
        <el-button @click="appraiseSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// https://vueup.github.io/vue-quill/
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { sizeFormat } from '@/utils/index';
import { ElMessage } from 'element-plus';
export default {
  name: 'GReport',
  components: {
    QuillEditor
  },
  data () {
    return {
      activeName: '反馈',
      currentReport: {
        type: "内容意见",
        content: '',
        state: '0',
      },
      lookMoreContent: "",
      updateReport: {},
      isToLong: false,
      lookMore: false,
      lookMore1: false,
      appraiseDialog: false,
      submitLoading: false,
      reportList: [],
      score: {
        score: 0,
        scoreContent: "",
      },
      isRepeatContent: "412523131",
      useRom: '0',
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'],
        [{ 'size': ['small', false, 'large', 'huge'] }],
        // [{ 'font': [] }],
        [{ 'align': [] }],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        // [{ 'indent': '-1' }, { 'indent': '+1' }],
        [{ 'header': 1 }, { 'header': 2 }],
        ['image'],
        // ['image', 'link', 'video'],
        // [{ 'direction': 'rtl' }],
        [{ 'color': [] }, { 'background': [] }]
      ]
    }
  },
  mounted () {
    this.getReportList();
  },
  methods: {
    onTextChange (e) {
      this.useRom = this.getStrSize(e);
      if (this.useRom < 10 * 1024 * 1024) {
        this.isToLong = false;
      } else {
        this.isToLong = true;
      }
      console.log("onTextChange", e);
      console.log(this.getStrSize(e))
    },
    submit () {

      if (this.currentReport.content.length < 10) {
        ElMessage({
          message: "内容过短",
          grouping: true,
          type: 'error',
          duration: 2000,
        })
        return;
      }
      if (this.isRepeatContent == this.currentReport.content) {
        ElMessage({
          message: "内容重复",
          grouping: true,
          type: 'error',
          duration: 2000,
        })
        return;
      } else {
        this.isRepeatContent = this.currentReport.content;
      }
      if (this.isToLong) {
        ElMessage({
          message: "上传数据限制10Mb以下",
          grouping: true,
          type: 'error',
          duration: 2000,
        })
        return;
      }
      this.submitLoading = true;
      var data = { type: this.currentReport.type, content: this.currentReport.content };
      //发送反馈
      this.$axios.post("/user/report", data).then(res => {
        if (res.flag) {
          this.submitLoading = false;
          this.reportList.unshift(this.currentReport);
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          })
        }
      })
    },
    getReportList () {
      this.$axios("/user/report/list").then(res => {
        if (res.flag) {
          this.reportList = res.data;
        }
      })
    },
    appraise (id, report) {
      this.score.id = id;
      this.appraiseDialog = true;
      this.updateReport = report;
    },
    appraiseSubmit () {
      var data = this.score;
      this.$axios.put("/user/report/score", data).then(res => {
        if (res.flag) {
          this.appraiseDialog = false;
          this.updateReport.state = 1;
          ElMessage({
            message: res.msg,
            grouping: true,
            type: 'success',
            duration: 2000,
          })
        }
      })
    },
    previewMore (data) {
      this.lookMore = true;
      this.lookMoreContent = data;
    },
    previewMore1 (data) {
      this.lookMore1 = true;
      this.lookMoreContent = data;
    },
    onEditorChange (e) {
      console.log("onEditorChange", e);
    },
    onEditorReady (e) {
      console.log("onEditorReady", e);
    },
    onEditorBlur (e) {
      console.log("onEditorBlur", e);
    },
    onEditorFocus (e) {
      console.log("onEditorFocus", e);
    },
    getStrSize (str) {
      if (str == null || str === undefined) return 0;
      if (typeof str != "string") {
        return 0;
      }
      var total = 0, charCode, i, len;
      for (i = 0, len = str.length; i < len; i++) {
        charCode = str.charCodeAt(i);
        if (charCode <= 0x007f) {
          total += 1;//字符代码在000000 – 00007F之间的，用一个字节编码
        } else if (charCode <= 0x07ff) {
          total += 2;//000080 – 0007FF之间的字符用两个字节
        } else if (charCode <= 0xffff) {
          total += 3;//000800 – 00D7FF 和 00E000 – 00FFFF之间的用三个字节，注: Unicode在范围 D800-DFFF 中不存在任何字符
        } else {
          total += 4;//010000 – 10FFFF之间的用4个字节
        }
      }
      return total;
    },

    // UTF8字符集实际长度计算
    getStrLeng (str) {
      var realLength = 0;
      var len = str.length;
      var charCode = -1;
      for (var i = 0; i < len; i++) {
        charCode = str.charCodeAt(i);
        if (charCode >= 0 && charCode <= 128) {
          realLength += 1;
        } else {
          // 如果是中文则长度加3
          realLength += 3;
        }
      }
      return realLength;
    },
    sizeFormat (data) {
      return sizeFormat(data);
    }
  }
}
</script>

<style scoped>
.container {
  /* padding: 10px; */
}
.report-list {
  float: left;
  width: 100%;
}
</style>